<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-03-08 09:06:14
-->
<template>
  <div class="map-container">
    <MiningMap :center="center" :zoom="zoom">
      <MiningTiandituLayer :ak="key" @ready="ready"></MiningTiandituLayer>
      <MiningVectorLayer
        ref="drawLayer"
        :featureStyle="style"
        @loaded="layerLoaded"
        @drawEnd="drawEnd"
      >
      </MiningVectorLayer>
      <MiningVectorLayer :featureStyle="style">
        <MiningLineString
          v-for="feature in features"
          :key="feature.getProperties().id"
          :feature="feature"
        ></MiningLineString>
      </MiningVectorLayer>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import { TiandituKey } from '@/config/config.js';  
import MiningVectorLayer from 'mining-map/Layers/VectorLayer'
import MiningLineString from 'mining-map/Features/LineString';
import { Style, Stroke as StrokeStyle, Icon } from 'ol/style';
import marker from '@/assets/images/marker.png'

export default {
  name: 'DrawPoint',
  title: 'DrawPoint',
  parentTitle: '绘制',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningVectorLayer,
    MiningLineString
  },
  data () { 
    const style = new Style({
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: marker,
      })
    })
    return {
      center: [116.43396401346438,39.926523711148874],
      zoom: 17,
      key: TiandituKey,
      features: [],
      style: style
    }
  },
  methods: {
    ready ({ map }) {
      console.log('ready', map)
    },
    layerLoaded () {
      this.$refs.drawLayer.startDraw('Point')
    },
    drawEnd (feature) {
      // feature.setStyle(baseStyle)
      this.features.push(feature)
      this.$refs.drawLayer.startDraw('Point')
    },     
    handleSelect (evt) {
      console.log(evt)
      this.draw.finishDrawing()
      this.draw.setActive(false)
    }, 
  }

}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
  text-align: left;
}
</style>